<template>
  <div class="tw-libchart">
    <div v-show="data.length>0"
      class="tw-datasetchart"
      ref="chart"
      :style="{height: height, backgroundColor: bgColor}">
    </div>

    <tw-lib-nodata v-show="data.length===0" />
  </div>
</template>

<script>
import props from './props'
import chartMixins from '../tw-lib-base/chart/chart'

export default {
  name: 'chart-pie-base',

  mixins: [chartMixins],

  props,

  data() {
    return {
      chartType: 'pie',
      legendData: []
    }
  },

  computed: {
    // option () {
    //   return {
    //     title: {
    //       show: this.showTitle,
    //       text: this.titleText,
    //       subtext: this.subtitleText
    //     },
    //     color: this.colors,
    //     legend: {
    //       show: this.showLegend,
    //       left: this.legendLeft === '' ? 'auto' : this.legendLeft,
    //       top: this.legendTop === '' ? 'auto' : this.legendTop,
    //       right: this.legendRight === '' ? 'auto' : this.legendRight,
    //       bottom: this.legendBottom === '' ? 'auto' : this.legendBottom,
    //       itemHeight: 10,
    //       itemWidth: 10,
    //       icon: this.icon,
    //       textStyle: {
    //         padding: [3, 0, 0, 0]
    //       },
    //       data: this.legendData
    //     },

    //     tooltip: {
    //       trigger: this.triggerType,
    //       formatter: '{b} : {c} ({d}%)'
    //     },
    //     series: this.series
    //   }
    // }
  },

  methods: {
    setSeries () {
      let length = this.data.length
      this.series = []
      // this.legendData = []
      let sdata = []
      for (let i = 1; i < length; i++) {
        // if (i > 0) {
          // this.legendData.push(this.data[i][0])
        sdata.push({
          value: this.data[i][1],
          name: this.data[i][0]
        })
        // }
      }
      this.series.push({
        name: length ? this.data[0][0] : '',
        type: this.chartType,
        radius: this.radiusLength,
        avoidLabelOverlap: true,
        startAngle: this.startAngle,
        label: {
          show: this.showLabel,
          position: this.positionLabel,
          formatter: this.showLabelFunc ? this.labelFunc : this.formatterLabel,
          // formatter: '{b}\n{c}\n{d}%',
          // padding: [-24, 0, 0, 0]
        },
        // data: sdata
      })
    },
    labelFunc (params) {
      if (this.funcLabel !== '' && typeof this.funcLabel === 'function') {
        let name = this.funcLabel(params)
        return name
      } else {
        if (params.percent < 10) {
          return ''
        } else if (params.name.length > 4) {
          return params.name.substring(0, 4) + '...'
        }
        return params.name
      }
    }
  },

  watch: {
    positionLabel () {
      this.setSeries()
    },
    startAngle () {
      this.setSeries()
    },
    formatterLabel () {
      this.setSeries()
    },
    radiusLength () {
      this.setSeries()
    },

    showLabel () {
      this.setSeries()
    },
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
